<template>
  <div>
    <div class="charts_wrap">
      <person-bar
        title="人员统计"
        :x-arr="['管理员人数', '学员人数', '好人数']"
        :bar-data="barArr"
      ></person-bar>
      <pie-chart :pie-data="pieArr"></pie-chart>
    </div>
    <line-chart
      :web-arr="webNum"
      :java-arr="javaNum"
      :des-arr="desNum"
      :date-arr="dateArr"
    ></line-chart>
  </div>
</template>
<script>
import personBar from '../charts/bar.vue'
import pieChart from '../charts/pie.vue'
import mapChart from '../charts/map.vue'
import lineChart from '../charts/line.vue'
import { _getCourseList } from '../../api/courselist'
import { _getAdmin } from '../../api/admin'
import { _getStudent } from '../../api/student'
export default {
  components: { personBar, pieChart, mapChart, lineChart },
  data () {
    return {
      stuNum: 0,
      adminNum: 0,
      barArr: [],
      pieArr: [],
      courseList: [],
      pageStart: 1,
      dateArr: [], //日期数组
      webArr: [], //收集所有前端
      javaArr: [], //收集所有后端
      designArr: [], //收集所有设计
      webNum: [],
      javaNum: [],
      desNum: []
    }
  },
  created () {
    this.getBarData()
    this.getCourse()
  },
  methods: {
    // 请求所有课程
    async getCourse () {
      var res = await _getCourseList({
        pageStart: this.pageStart
      })
      this.courseList = this.courseList.concat(res.data.data.list)
      if (
        this.pageStart < Math.ceil(res.data.data.count / res.data.data.pageSize)
      ) {
        this.pageStart++
        this.getCourse()
      }
      // 处理日期
      console.log(this.courseList)
      var arr = this.courseList.map(item => {
        return new Date(item.createAt).toLocaleDateString()
      })
      this.dateArr = new Set(arr)
      console.log(this.dateArr)
      this.courseList.forEach(item => {
        if (item.CategoryOne == '1') {
          this.webArr.push(item)
        } else if (item.CategoryOne == '2') {
          this.javaArr.push(item)
        } else {
          this.designArr.push(item)
        }
      })

      // 使用日期数组 将前端后端视觉设计分类
      this.webNum = this.getArr(this.webArr)
      this.javaNum = this.getArr(this.javaArr)
      this.desNum = this.getArr(this.designArr)
      console.log(this.webNum)
      console.log(this.javaNum)
      console.log(this.desNum)
    },
    getArr (asarr) {
      //以日期为循环条件 处理前端 后端 视觉数据数量
      var obj = {}
      this.dateArr.forEach((item, index) => {
        var x = 1
        asarr.forEach(weBitem => {
          if (item == new Date(weBitem.createAt).toLocaleDateString()) {
            obj[item] = x++
          }
        })
      })
      console.log(obj)
      var warr = Object.values(obj)
      console.log(warr)
      return warr
    },
    async getBarData () {
      console.log(88888888)
      var Adminres = await _getAdmin({
        pageStart: 1
      })
      this.adminNum = Adminres.data.data.count

      var stuRes = await _getStudent({
        pageStart: 1
      })
      this.stuNum = stuRes.data.data.count
      this.$set(this.barArr, 0, this.adminNum)
      this.$set(this.barArr, 1, this.stuNum)
      this.pieArr = [
        { name: '管理员人数', value: this.adminNum },
        { name: '学员人数', value: this.stuNum }
      ]
      console.log(this.adminNum, this.stuNum)
    }
  },
  computed: {
    barData () {
      return [this.adminNum, this.stuNum]
    }
  }
}
</script>
<style lang="less">
.charts_wrap {
  display: flex;
  justify-content: space-between;
}
</style>
